<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a{
            margin: auto;
            width: 400px;
            height: 400px;
            background-color: rgb(189, 8, 8);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .b{
            width: 40px;
            height: 40px;
            background-color: rgb(16, 169, 72);
            box-shadow: 0 -40px 0 -10px white,0 -40px 0 -11px white,0 -40px 0 -12px white,0 -40px 0 -13px white,0 -40px 0 -14px white;
            border-radius: 999px;
            animation: c 1.7s infinite ease,d 1.7s infinite ease;

        }
        @keyframes c{
            0%{
                transform: rotate(0);
            }
            100%{
                transform: rotate(360deg);
            }
        }
        @keyframes d{
            0%{
                box-shadow: 0 -40px 0 -10px white,0 -40px 0 -11px white,0 -40px 0 -12px white,0 -40px 0 -13px white,0 -40px 0 -14px white;
            
            }

            5%,
            95% {
                box-shadow: 0 -40px 0 -12px white, 0 -40px 0 -13px white, 0 -40px 0 -14px white, 0 -40px 0 -15px white, 0 -40px 0 -16px white;  
        }


        10%,
          60% {
            box-shadow: 0 -40px 0 -12px white, -4px -39px 0 -13px white, -9px -38px 0 -14px white, -13px -37px 0 -15px white, -15px -36px 0 -16px white;
          }
            10%,60%
            {
                box-shadow: 0 -40px 0 -10px white,-4px -39px 0 -11px white,-9px -38px 0 -12px white,-14px -37px 0 -13px white, -15px -36px -14px white,;
            
            }
            20%{
                box-shadow: 0 -40px 0 -10px white,-17px -38px 0 -11px white,-25px -31px 0 -12px white,-33px -24px 0 -13px white, -37px -17px -14px white,;
            
            }
            40%{
                box-shadow: 0 -40px 0 -10px white,-19px -37px 0 -11px white,-32px -26px 0 -12px white,-38px -15px 0 -13px white, -41px -4px -14px white,;
            
            }
            100%{
                box-shadow: 0 -40px 0 -10px white,0 -40px 0 -11px white,0 -40px 0 -12px white,0 -40px 0 -13px white,0 -40px 0 -14px white,;
            
            }

        }
    </style>
</head>
<body>
    <div class="a">
        <div class="b"></div>
    </div>
</body>
</html>